<template>
  <div>
    <Page auto-content-height>
      <FosoCard :showheader="false" :title="title" class="!px-0 !pt-0">
        <FosoForm
          ref="formRef"
          :form-columns="formColumns"
          :form-columns-num="8"
          :form-data="formData"
          :form-expand="true"
          label-width="auto"
          @search-handle="SearchHandle"
        />
      </FosoCard>
      <!-- 表格 -->
      <Grid class="!h-[90%]">
        <!-- 表格操作 -->
        <template #action="{ row }">
          <el-button
            :icon="Delete"
            link
            type="danger"
            @click="DeleteHandle(row)"
          />
        </template>
      </Grid>
    </Page>
  </div>
</template>

<script setup lang="tsx">
import type { tokenRowType } from './type';

import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { Delete } from '@element-plus/icons-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { updateApi } from '#/api/sys/api';
import { deleteToken, getTokenList } from '#/api/sys/token';
import FosoCard from '#/components/FosoCard/index.vue';
import FosoForm from '#/components/FosoForm/index.vue';
import switchStatus from '#/components/FosoSwitch/index.vue';
import { useTable } from '#/hooks/usetable';

// 表单实例
const formRef = ref();
const title = ref('部门管理');
// 表单数据
const formData = ref({
  // uuid: '',
  // username: '',
  // email: '',
  // nickname: '',
});
// 表格获取数据
const getApiListData = async (params?: any) => {
  const { page = 1, pageSize = 5 } = params;
  const res: any = await getTokenList({
    page,
    pageSize,
    ...formData.value,
  });
  return {
    total: res.total,
    items: res.data.data,
  };
};

// 表格配置项
const { tableconfig } = useTable({
  columns: [
    {
      type: 'checkbox',
      width: 50,
    },
    {
      title: $t('sys.token.UUID'),
      field: 'uid',
    },
    {
      title: $t('sys.token.userName'),
      field: 'username',
    },
    {
      title: $t('sys.token.token'),
      field: 'token',
    },
    // {
    //   title: $t('sys.token.source'),
    //   field: 'source',
    // },
    // 状态
    {
      title: $t('sys.role.status'),
      field: 'status',
      slots: {
        default: ({ row }: { row: any }) => {
          return h(switchStatus, {
            status: row.status,
            'onUpdate:status': async (value: any) => {
              try {
                await updateApi({
                  id: row.id,
                  status: value,
                });
                ElMessage.success($t('common.operateSuccess'));
                row.status = value;
              } catch {
                ElMessage.error($t('common.operateFailed'));
              }
            },
          });
        },
      },
    },
    // 创建时间
    {
      title: $t('sys.menu.createTime'),
      field: 'createTime',
      formatter: ['formatDate', 'yyyy-MM-dd'],
      width: 180,
    },
    // 隐藏
    {
      title: $t('sys.token.ExpirationDate'),
      field: 'expiredAt',
      formatter: ['formatDate', 'yyyy-MM-dd'],
    },
    { title: '操作', width: 200, slots: { default: 'action' } },
  ],
  // 远程请求数据
  proxyConfig: {
    ajax: {
      query: async (page: any) => {
        const { currentPage, pageSize } = page.page;
        return await getApiListData({ page: currentPage, pageSize });
      },
    },
  },
});

// 表格事件
const gridEvents = {};

// 表格实例
const [Grid, gridApi] = useVbenVxeGrid({
  gridEvents,
  gridOptions: tableconfig.value,
});

// 表单配置项
const formColumns = computed(() => [
  {
    label: $t('sys.token.UUID'), // 表单项的标签
    prop: 'uid', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: '请输入', // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },

  {
    label: $t('sys.token.userName'), // 表单项的标签
    prop: 'username', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: '请输入', // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
  {
    label: $t('sys.department.email'), // 表单项的标签
    prop: 'email', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: '请输入', // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
  {
    label: $t('sys.configuration.name'), // 表单项的标签
    prop: 'nickname', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: '请输入', // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
]);

/**
 * @author: Buke
 * @description: 删除数据
 * @param {tokenRowType} row - 要删除的行数据
 * @return {Promise<void>} 无返回值
 */
const DeleteHandle = async (row: tokenRowType): Promise<void> => {
  try {
    const ids = [row.id] as any;
    await deleteToken(ids).then(() => {
      ElMessage.success('删除成功');
      // 刷新列表
      gridApi.query();
    });
  } catch {
    ElMessage.error('删除失败');
  }
};

/**
 * @author: Buke
 * @description: 刷新表格数据
 * @return {void} 无返回值
 * @todo 令牌查询接口问题
 */
const SearchHandle = (): void => {
  // 调用表格 API 的 query 方法，触发表格数据的重新加载
  gridApi.query();
};
</script>
